<template>
  <div class="bg-white">
    <h2>关于：</h2>
    <p>这个应用可以用来追踪你选择城市的当前天气</p>
    <h2>如何使用:</h2>
    <p>
      1.点击搜索框输入你希望追踪的城市
      <br />
      2.在搜索结果中选中一个城市，你将获取当地最新的天气
      <br />
      3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
    </p>
    <h2>移除城市:</h2>
    <p class="no-margin">
      如果你不想在首页关注某个城市,可以通过底部的按钮删
      <br />
      除它
    </p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script setup></script>

<style scoped>
* {
  color: black;
}
.bg-white {
  align-self: flex-start;
  max-width: 768px;
  background-color: white;
  padding: 1rem;
  margin-top: 8rem;
  border-radius: 0.2rem;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
p {
  margin: 0;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
p.no-margin {
  margin: 0;
}
button {
  background-color: rgb(0 102 138);
  border: 0;
  padding: 0.5rem 1.5rem;
  margin-top: 2rem;
  text-transform: none;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1rem;
  color: white;
}
</style>
